<script setup lang="ts">
import PictureUpload from '@/components/PictureUpload.vue'
import { computed, onMounted, reactive, ref } from 'vue'
import {
  getPictureVoByIdUsingGet,
  getTagCategoryUsingGet,
  updatePictureUsingPost,
} from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import UrlPictureUploadPage from '@/components/UrlPictureUpload.vue'

const route = useRoute()
const uploadType = ref<'file' | 'url'>('file')
const picture = ref<API.PictureVO>()
const spaceId = computed(() => route.query.spaceId)
const onSuccess = (newPicture: API.PictureVO) => {
  console.log('图片上传成功的回调' + newPicture)
  picture.value = newPicture
  pictureForm.name = newPicture.name
}
const pictureForm = reactive<API.PictureUpdateReq>({})
const router = useRouter()
const handleSubmit = async (values: any) => {
  const pictureId = picture.value?.id
  if (!pictureId) {
    return
  }
  await updatePictureUsingPost({
    id: pictureId,
    spaceId: spaceId.value,
    ...values,
  })
  message.success('图片创建成功')
  router.push({ path: `/picture/${pictureId}` })
}
const categoryOptions = ref<string[]>([])
const tagOptions = ref<string[]>([])
const getTagCategoryOptions = async () => {
  const res = await getTagCategoryUsingGet()
  categoryOptions.value = (res?.data.categoryList || []).map((data: string) => {
    return {
      value: data,
      label: data,
    }
  })
  tagOptions.value = (res?.data.tagList || []).map((data: string) => {
    return {
      value: data,
      label: data,
    }
  })
}
onMounted(() => {
  getTagCategoryOptions()
  getPictureInfo()
})
const getPictureInfo = async () => {
  const picId = route.query?.id
  if (picId) {
    const res = await getPictureVoByIdUsingGet({
      id: picId,
    })
    const data = res?.data
    picture.value = data
    pictureForm.name = data.name
    pictureForm.introduction = data.introcution
    pictureForm.category = data.category
    pictureForm.tags = data.tags
  }
}
</script>

<template>
  <div id="addPicture">
    <h2 style="margin-bottom: 16px">
      {{ route.query.id ? '编辑图片' : '创建图片' }}
    </h2>
    <a-tabs v-model:activeKey="uploadType">
      <a-tab-pane key="file" tab="文件上传">
        <PictureUpload :picture="picture" :spaceId="spaceId" :on-success="onSuccess" />
      </a-tab-pane>
      <a-tab-pane key="url" tab="URL上传" force-render>
        <UrlPictureUploadPage :picture="picture" :spaceId="spaceId" :on-success="onSuccess" />
      </a-tab-pane>
    </a-tabs>
    <a-form
      v-if="picture"
      layout="vertical"
      :model="pictureForm"
      @finish="handleSubmit"
      class="searchForm"
    >
      <a-form-item name="name" label="图片名称">
        <a-input v-model:value="pictureForm.name" placeholder="图片名称" allowClear />
      </a-form-item>
      <a-form-item label="图片简介" name="introduction">
        <a-textarea
          v-model:value="pictureForm.introduction"
          placeholder="图片简介"
          :auto-size="{ minRows: 2, maxRows: 5 }"
          allowClear
        />
      </a-form-item>
      <a-form-item label="分类" name="category">
        <a-auto-complete
          v-model:value="pictureForm.category"
          placeholder="请输入分类"
          :options="categoryOptions"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="标签" name="tags">
        <a-select
          v-model:value="pictureForm.tags"
          mode="tags"
          placeholder="请输入标签，按回车确定"
          :options="tagOptions"
          allowClear
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 100%">
          {{ route.query.id ? '更新' : '创建' }}
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped>
#addPicture {
  max-width: 720px;
  margin: 0 auto;
}
</style>
